<template>
  <el-select ref="dataEl" v-model="detail.id" filterable
             :filter-method="filterChange"
             @clear="clearHandle"
             :clearable="true" style="width: 100%">
    <el-option :label="detail.name" :value="detail.id">
      <!--      <el-input-->
      <!--        placeholder="输入关键字进行过滤"-->
      <!--        v-model="filterText">-->
      <!--      </el-input>-->
      <el-tree
        ref="elTree"
        :data="treeList||[]"
        :filter-node-method="filterNode"
        :default-expanded-keys="expandList"
        node-key="id"
        @node-click="clickTreeNode">
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "tree-select",
    data() {
      return {
        filterText: '',
        treeList: [],
        expandList: [],
        detail: {}//{value,name}
      }
    },
    mounted() {
      this._initHandle();
    },
    watch: {
      filterText(val) {
        this.$refs.elTree.filter(val);
      }
    },
    methods: {
      filterChange(val) {
        this.filterText = val;
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 初始化值
      _initHandle() {
        this.$nextTick(() => {
          let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
          let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
          scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
          scrollBar.forEach(ele => ele.style.width = 0)
        });
      },

      /**
       * 点击树节点
       * @param treeList 树列表
       * @param defaultData 默认值:{name,id}
       * @param expandList 展开节点:value数组
       */
      initPage(treeList, defaultData, expandList) {
        this.treeList = treeList || [];
        this.detail = defaultData || {};
        this.expandList = expandList || [];

        this.$nextTick(() => {
          this.$refs.elTree.setCurrentKey(this.detail.id);
        })
        if (!this.expandList.length) {
          this.expandList.push(treeList[0].id);
        }
      },
      setValue(detail) {
        this.detail = detail;
      },
      /**
       * 点击树节点
       * @param node
       * node={name,id}
       */
      clickTreeNode(node) {
        this.detail = node;
        this.$refs.dataEl.blur();
        this.notifyData();
      },

      // 清除选中
      clearHandle() {
        this.detail = {};
        this.notifyData();
      },
      notifyData() {
        this.$emit('change', this.detail)
      }
    },
  }
</script>

<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }

  .el-select-dropdown__item.selected {
    font-weight: normal;
  }

  ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }

  .el-tree-node__label {
    font-weight: normal;
  }

  .el-tree >>> .is-current .el-tree-node__label {
    color: #409EFF;
    font-weight: 700;
  }

  .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
  }
</style>
